<style>
  .jstree-clicked {
    background-color:  #404040 !important;
    box-shadow: inset 0 0 0px #999 !important;
    border: 0px;
  }

  .jstree-hovered{

    background-color:  #404040 !important;
    box-shadow: inset 0 0 0px #999 !important;
    border: 0px;
  }
</style>
<div class="wrapper wrapper-content m-wrapper-content" style="background-color: #404040" ng-controller="Contouring02Controller">

  <!-- Page wrapper -->
  <div ng-include="'app/Contouring02/ContouringToolbar.html'"></div>
  <div class="row">

    <div id="TRtree" class="col-lg-2 no-padding TRtree"  >

      <div id="treeUp" class="col-lg-12 no-padding no-margins">
        <div class="ibox no-margins mBox tr-background content mCustomScrollbar" data-mcs-theme="dark" style="height: 350px;">

          <div class="ibox-content tr-background " id="topTree" >
            <div  id="jstree_demo_div" js-tree="treeConfig1" ng-model="treeData1" tree="treeInstance1" tree-events="ready:readyCB;create_node:createNodeCB;loaded:loadedCB;init:initCB;load_all:load_allCB"></div>
          </div>

        </div>
      </div>


      <div id="treeDown" class="col-lg-12 no-padding no-margins" ng-style="detailTree">
        <!--<button ng-click="changeIconColor()">changeIconColor</button>-->

        <!--{{selected_nodes|json}}-->
        <div  id="Scrollbar_TRstruct" class="col-lg12 no-padding no-margins tr-background content mCustomScrollbar" data-mcs-theme="dark" >
          <div class="ibox mBox">

            <div class="ibox-content tr-background" style="border-top: none;">
              <!--<div js-tree="treeConfig" ng-model="treeData" tree="treeInstance2" tree-events="ready:readyCB;create_node:createNodeCB;loaded:loadedCB;init:initCB;load_all:load_allCB"></div>-->
              <div  id="jstree_TRstruct" js-tree="treeConfig4" ng-model="treeData4" tree="treeInstance4" tree-events-obj="treeEventsObj" ng-click="showLine()"></div>
            </div>
          </div>
        </div>
      </div>



    </div>


    <!--<div class="col-lg-7 no-padding">-->
      <!--<div class="ibox mBox">-->
        <!--<div class="ibox-title mTitle">-->
          <!--<h5>Model View</h5>-->
          <!--<div ibox-tools-full-screen></div>-->
        <!--</div>-->
        <!--<div class="ibox-content no-padding mBox-content">-->
          <!--<div>-->
              <!--<canvas linechart options="lineOptions" data="lineData" height="200" responsive=true ></canvas>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->



    <div class="col-lg-7 no-padding mCol-center" style="background-color: #404040;">
      <div class="ibox mBox">
        <div id="title" class="ibox-title mTitle">
          <h5>Model View</h5>
          <div ibox-tools-full-screen></div>
        </div>
        <div id="imageDiv"  class="ibox-content mBox-center-content no-padding" style="position: relative;">
          <div ng-include="'app/loading/loading.html'"></div>
          <div id="imageContainer" style=""></div>
          <div style="position: absolute; z-index: 999; width: 60%; display: none;"
            class="wid-right">
            <input type="range" id="slice-range">
          </div>
        </div>
      </div>
    </div>




    <div id="rightDiv" class="col-lg-3 no-padding">

      <div class="col-lg-12 no-padding" >
        <div class="ibox mBox">
          <div class="ibox-title mTitle mBox-center-Title">
            <h5>Frontal-TRstruct</h5>
            <div ibox-tools-full-screen></div>
          </div>
          <div class="ibox-content mBox-content no-padding">
            <img src="assets/images/Contouring/cornal.PNG" width="100%" height="100%" alt="">
          </div>
        </div>
      </div>

      <div class="col-lg-12 no-padding">
        <div class="ibox mBox">
          <div class="ibox-title mTitle">
            <h5>Sagittal-TRstruct</h5>
            <div ibox-tools-full-screen></div>
          </div>
          <div class="ibox-content no-padding mBox-content" >
            <img src="assets/images/Contouring/sagittal.PNG" width="100%" height="100%" alt="">
          </div>
        </div>
      </div>

      <div class="col-lg-12 no-padding">
        <div class="ibox mBox">
          <div class="ibox-title mTitle">
            <h5>Model View</h5>
            <div ibox-tools-full-screen></div>
          </div>
          <div class="ibox-content no-padding mBox-content">
            <img src="assets/images/Contouring/transver.PNG" width="100%" height="100%" alt="">
          </div>
        </div>
      </div>
    </div>



    <!--<div class="col-lg-9">-->



      <!--<div class="col-lg-9">-->
        <!--<div class="ibox">-->
          <!--<div class="ibox-title">-->
            <!--<h5>Example with fullscreen option</h5>-->
            <!--<div ibox-tools-full-screen></div>-->
          <!--</div>-->
          <!--<div class="ibox-content">-->

            <!--<div>-->
              <!--<c3chart bindto-id="chart2">-->
                <!--<chart-column column-id="data 1"-->
                              <!--column-values="30, 200, 100, 400, 150, 250"-->
                              <!--column-type="spline" column-color="#1ab394"/>-->
                <!--<chart-column column-id="data 2"-->
                              <!--column-values="130, 100, 140, 200, 150, 50"-->
                              <!--column-type="spline" column-color="#BABABA" />-->
              <!--</c3chart>-->
            <!--</div>-->


          <!--</div>-->
        <!--</div>-->
      <!--</div>-->











    <!--</div>-->

  </div>


</div>
